<script lang="ts">
import { defineComponent, h, reactive, ref, useAttrs } from "vue";
import { HDataTable, HConditionalSearch, HDrawer, HModal } from "@/components";
import {
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NButton,
  NDatePicker,
} from "naive-ui";
import { Columns } from "./columns";
import { Service } from "@/type/service";
import { DialogProps, TableProps } from "@/type";
import { QualityService } from "@/api/QualityTetection";

export default defineComponent({
  components: {
    NButton,
    NLayout,
    NLayoutHeader,
    NLayoutContent,
    NDatePicker,
    HDrawer,
    //
    HModal,
    HDataTable,
    HConditionalSearch,
  },
  setup() {
    const modalShow = ref<boolean>();
    const state = reactive({}) as QualityState;

    // 校验规则
    const checkRule = h(
      NButton,
      {
        text: true,
        style: {
          margin: "0px",
          padding: "5px 10px",
          cursor: "pointer",
        },
        onClick: () => {},
      },
      { default: () => "校验规则" }
    );
    // 详情
    const detail = h(
      NButton,
      {
        text: true,
        style: {
          margin: "0px",
          padding: "5px 10px",
          cursor: "pointer",
          borderLeft: "1px solid #d2d1d1",
        },
        onClick: () => {
          state.DetailDrawer = true;
        },
      },
      { default: () => "详情" }
    );
    // 校验记录
    const record = h(
      NButton,
      {
        text: true,
        style: {
          margin: "0px",
          padding: "5px 10px",
          cursor: "pointer",
          borderLeft: "1px solid #d2d1d1",
        },
        onClick: () => {},
      },
      { default: () => "效验记录" }
    );

    return {
      modalShow,
      record,
      checkRule,
      detail,
      state,
    };
  },
  computed: {
    tableProps(): TableProps {
      return {
        columns: Columns(),
        title: "质量检查",
        service: QualityService as Service,
        otherBtn: [this.checkRule, this.record, this.detail],
        hiddenBtn: {
          hidden: true,
        },
      };
    },
    searchProps(): DialogProps {
      return {
        columns: Columns()?.filter((c) => !c.hideInSearch),
      };
    },
    detailProps(): detailProps {
      return {
        title: "详情",
        show: this.state.DetailDrawer ?? false,
        dialogshow: (show?: boolean) => {
          this.state.DetailDrawer = show;
        },
      };
    },
  },
  methods: {},
});
</script>

<template>
  <n-layout>
    <n-layout-header>
      <h-conditional-search v-bind="searchProps" />
    </n-layout-header>
    <n-layout-content>
      <h-data-table v-bind="tableProps">
        <template #QualityTetectionBtton style="width: 500px">
          <n-button text>今日</n-button>
          <n-button text>本周</n-button>
          <n-button text>本月</n-button>
          <n-button text>全年</n-button>
          <n-date-picker
            type="daterange"
            style="width: 300px; margin-right: 20px"
          ></n-date-picker>
        </template>
      </h-data-table>
      <!-- <h-modal v-bind="dialogProps" /> -->
      <h-drawer v-bind="detailProps"> </h-drawer>
    </n-layout-content>
  </n-layout>
</template>

<style scoped lang="less">
.n-layout {
  background-color: #f6f6f7;
  width: 100%;
  .n-layout-header {
    width: 100%;
  }
  // .table .rule-title .button[data-v-e7f6379a]{
  //   width: 100%;
  // }
}
</style>
